<template>
  <div class="swiper-container">
    <van-swipe :autoplay="3000">
      <van-swipe-item
        v-for="(image, index) in list"
        :key="image.imgUrl + index" 
        @click="pushRouterFlim(JSON.parse(image.actionData))"
      >
        <img v-lazy="image.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 绝对定位的地址图标 -->
    <van-tag
      plain
      
      size="large"
      class="swiper-address"
      @click="pushRouterCity"
      >{{ cityGet }}
      <van-icon name="arrow-down" size="12px" />
    </van-tag>
  </div>
</template>

<script>
import swiperRow from "../../request-get/swiper-row.js";
export default {
   name:"swiperRow",
   created() {
    var that = this;
    // 做好轮播图
    swiperRow.then(function (res) {
      for (let i = 0; i < res.length; i++) {
        that.list.push(res[i]);
      }
    });
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    cityGet() {
      // 这个cityGet可以动态显示默认 或者你在vuex改过的值
      for (let item of this.$store.state.cityList) {
        if (this.$store.state.cityId == item.cityId) {
          return item.name;
        }
      }
    }

  },
  methods: {
    setfilmId(e) {
      this.$store.commit("setfilmId", e);
    },
    pushRouterFlim(e) {
      // 其实这时候我在click上 已经解析了json字符串了 直接用就行了 e.businessId
      this.setfilmId(e.businessId);
      this.$store.commit("setShow",0)
      this.$router.push({
        path: "film",
        query:{
          filmId:e.businessId,
          showBuy:true
        }
      });
    },
    pushRouterCity() {
      // 跳转到地点city界面 就完事了 数据已经存好了
      this.$router.push({
        path: "searchCityList"
     
      });
    },
  }
 



};
</script>


<style scoped>
img {
  width: 100%;
  height: 180px;
}
.swiper-container {
  position: relative;
}
.swiper-address {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  border: none;
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
}
</style>
